<template>
  <div class="swiper">
	<swiper
	    :slides-per-view="5"
	        :space-between="20"
	        navigation
	        :pagination="{ clickable: true }"
	        @swiper="onSwiper"
	        @slideChange="onSlideChange"
	  >
	  <!-- <div class="nn"> -->
	    <swiper-slide v-for="i in 15">
			<swiper-item imgLink="" relayNum="100" describe="100首精选粤语歌 怀念旧时光"></swiper-item>
		</swiper-slide>
	    <!-- </div> -->
	  </swiper>
  </div>
</template>

<script>
	import swiperItem from './swiperItem3.vue'
	  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
	  import { Swiper, SwiperSlide } from 'swiper/vue';
	  import 'swiper/swiper-bundle.css'
	  import 'swiper/swiper.scss';
	  import 'swiper/components/navigation/navigation.scss';
	  import 'swiper/components/pagination/pagination.scss';
	  import 'swiper/components/scrollbar/scrollbar.scss';
	  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
  export default{
    name:'',
    data(){
      return {
          
       }
    },
    methods:{
      onSwiper(swiper) {
             console.log(swiper)
           },
           onSlideChange() {
             console.log('slide change')
           },
    },
    components:{
       Swiper,
      SwiperSlide,swiperItem
    },
	props:{
		title:{
			type:String,
			default(){
				return ""
			}
		}
	},
	mounted() {
		
	}
  }
</script>

<style scoped>
	.swiper{
		width: 90%;
		margin: 0 auto;
	}
	.nn{
		margin-left: 20px;
	}
	.swiper-button-prev, .swiper-button-next{
		display: block;
	}
</style>
